import Taro, { Component } from '@tarojs/taro'
import { AtTabs, AtTabsPane } from 'taro-ui'
import { View, ScrollView } from '@tarojs/components'
import { DNavBar, DInventory, DItemError } from '@/components'
import http from '@/api'
import sdk from '@/common/sdk'
import './inventorydaily.scss'

export default class inventorydaily extends Component {
  constructor(props) {
    super(props)
    this.state = {
      active: 0,
      list: [],
      obj1: {
        page: 1,
        limit: 10
      },
      footerStatus: false,
      totalPage: 1,
      scrollHeight: window.screen.availHeight,
      listStatus: false
    }
  }
  componentWillMount() {
    this.handleClick(0)
  }

  componentDidShow() {
    let { active, listStatus } = this.state
    if (listStatus) {
      return
    }
    this.setState({
      list: [],
      obj1: {
        ...this.state.obj1,
        page: 1
      },
      totalPage: 1,
      listStatus: true
    }, () => {
      this.getInvenList(active + 1)
    })
    sdk.setTitleInfo('每日盘库')
  }


  handleClick(value) {
    this.setState({
      footerStatus: false,
      list: [],
      obj1: {
        ...this.state.obj1,
        page: 1
      },
      active: value,
      totalPage: 1,
      listStatus: true
    }, () => {
      this.getInvenList(this.state.active + 1)
    })
  }
  filterStatus(status) {
    let that = this
    return {
      1: '待盘库',
      2: '已盘库',
      // 3: '已盘库',
      // 4: '订单完成',
      9: '盘库已过期'
    }[status]
  }
  getInvenList(status) {
    let { obj1, totalPage } = this.state
    let params = {
      ...obj1,
      status
    }
    if (obj1.page > totalPage) {
      this.setState({
        footerStatus: true
      })
      return
    }
    http.getInvenLists(params).then(res => {
      if (!res) {
        return
      }
      let dataList = res.map(item => {
        // let status
        // if (item.status === 9) { // 盘库过期
        //   status = item.status
        // } else {
        //   status = item.carStocktaking.status
        // }
        return {
          ...item.carStocktaking,
          id: item.id,
          detailId: item.carStocktaking.id,
          refInfoId: item.refInfoId,
          stocktakingDate: item.stocktakingDate,
          status: item.status,
          vehicleOwnerName: item.carAdvanceMoneyApply.vehicleOwnerName,
          createTime: item.carAdvanceMoneyApply.createTime
        }
      })
      const { list } = this.state
      let _list = [...dataList]
      this.setState({
        list: _list,
        totalPage: res.totalPage,
        listStatus: false
      })

    })
  }

  // 滑到底部触发
  onScrollEnd = () => {
    this.setState({
      obj1: {
        ...this.state.obj1,
        page: this.state.obj1.page + 1
      }
    }, () => this.getInvenList(this.state.active + 1))
  }

  handlePush(active, item) {
    let urls = {
      0: `/pages/dwaitinventory/dwaitinventory?id=${item.id}&refInfoId=${item.refInfoId}`,
      1: `/pages/dinventoryed/dinventoryed?id=${item.detailId}&id2=${item.id}`,
    }
    Taro.navigateTo({
      url: urls[active]
    })
  }
  getBtnText(status) {
    return {
      1: '我要盘库',
      2: '查看详情',
      3: '查看详情',
    }[status]
  }
  goDetail(item) {
    if (item.status !== 9) return
  }

  render() {
    const tabList = [{ title: '待盘库' }, { title: '已盘库' }]
    const {
      active,
      list,
      footerStatus,
      scrollHeight
    } = this.state
    return (
      <View className='b_inventorydaily'>
        <DNavBar title={'每日盘库'} className='b_inventorydaily_nav'></DNavBar>
        <View className='b_inventorydaily__box'>
          <View className='b_inventorydaily__content'>
            <AtTabs current={active} tabList={tabList} onClick={this.handleClick.bind(this)}>
              {
                tabList.map(tap => <AtTabsPane>
                  <ScrollView
                    scrollY
                    scrollWithAnimation
                    lowerThreshold='20'
                    style={`height:${scrollHeight - 100}PX`}
                    onScrollToLower={this.onScrollEnd}
                  >
                    {
                      list && list.length > 0 && list.map(item => {
                        return <DInventory
                          onHandleDetail={this.handlePush.bind(this, active, item)}
                          {...item}
                          list={[item.carType]}
                          order={item.orderNo}
                          status={this.filterStatus(item.status)}
                          carnum={item.vin || '--'}
                          color={item.outColor + '/' + item.inColor}
                          stardata={item.stocktakingDate}
                          // {item.status === 1 ? '我要盘库' : '查看详情'}
                          firstText={this.getBtnText(item.status)}
                          onHandleDetail={this.goDetail.bind(this, item)}
                          onHandleFirst={this.handlePush.bind(this, active, item)}>
                        </DInventory>
                      })
                    }
                    {
                      // footerStatus && <View className='b_inventorydaily__more'>暂无更多</View>
                    }
                  </ScrollView>
                </AtTabsPane>)
              }
            </AtTabs>
          </View>
          {
            list.length === 0 && <DItemError></DItemError>
          }
        </View>
      </View>

    )
  }

}
